<!-- 赞助页面 -->
<template>
  <div class="content-wrap">
    <div class="more">
      <!-- 标题框 -->
      <div class="bb">
        <div class="bb1">
          <!-- 小装饰 -->
          <div class="bb1-1">
            <div class="style_5"></div>
            <div class="style_6">
              <img src="https://www.13ku.cn/static/img/zanzhu/zu3.png" />
            </div>
          </div>
          <!-- 赞助方案标题 -->
          <div class="title">
            <div class="font-box zan">赞</div>
            <div class="font-box zhu">助</div>
            <div class="font-box fang">方</div>
            <div class="font-box an">案</div>
          </div>
          <!-- 小装饰 -->
          <div class="zs-box">
            <div class="y1"></div>
            <div class="y2"></div>
          </div>
        </div>
      </div>
      <!-- 赞助选项 -->
      <div class="content">
        <ul class="wzw-money-wrap">
          <li data-pay="10" class="wzw-money-item" @click="zz(0)">
            <span class="wzw-money-label">￥10</span>
            <img
              class="wzw-money-icon"
              src="https://www.13ku.cn/static/img/zanzhu/1.png"
              alt="一个鸡腿"
              draggable="false"
            />
            <b class="wzw-money-name">一个鸡腿</b>
          </li>
          <li data-pay="20" class="wzw-money-item" @click="zz(1)">
            <span class="wzw-money-label">￥20</span>
            <img
              class="wzw-money-icon"
              src="https://www.13ku.cn/static/img/zanzhu/2.png"
              alt="一杯咖啡"
              draggable="false"
            />
            <b class="wzw-money-name">一杯咖啡</b>
          </li>
          <li data-pay="30" class="wzw-money-item" @click="zz(2)">
            <span class="wzw-money-label">￥30</span>
            <img
              class="wzw-money-icon"
              src="https://www.13ku.cn/static/img/zanzhu/4.png"
              alt="一个汉堡"
              draggable="false"
            />
            <b class="wzw-money-name">一个汉堡</b>
          </li>
          <li data-pay="50" class="wzw-money-item" @click="zz(3)">
            <span class="wzw-money-label">￥50</span>
            <img
              class="wzw-money-icon"
              src="https://www.13ku.cn/static/img/zanzhu/5.png"
              alt="一份肯德基套餐"
              draggable="false"
            />
            <b class="wzw-money-name">一份肯德基套餐</b>
          </li>
          <li data-pay="100" class="wzw-money-item" @click="zz(4)">
            <span class="wzw-money-label">￥100</span>
            <img
              class="wzw-money-icon"
              src="https://www.13ku.cn/static/img/zanzhu/3.png"
              alt="一份全家桶"
              draggable="false"
            />
            <b class="wzw-money-name">一份全家桶</b>
          </li>
          <li data-pay="zdy" class="wzw-money-item" @click="zz(5)">
            <span class="wzw-money-label">自定义</span>
            <img
              class="wzw-money-icon"
              src="https://www.13ku.cn/static/img/zanzhu/6.png"
              alt="爱心红包"
              draggable="false"
            />
            <b class="wzw-money-name dsjb">爱心红包</b>
          </li>
        </ul>
      </div>
    </div>

    <div class="more">
      <!-- 标题 -->
      <div class="bbb">
        <div>
          <div class="title-box">
            <div class="title1">
              <img src="https://www.13ku.cn/static/img/zanzhu/zu1.png" />
            </div>
            <div class="title2">
              <div class="top">
                <!-- 序号 -->
                <div style="margin-right: 7px">
                  <div
                    style="
                      color: #ff6b4d;
                      letter-spacing: 0px;
                      line-height: 18px;
                      text-align: justify;
                      font-size: 16px;
                      font-weight: bold;
                    "
                  >
                    <p style="padding: 0px; margin: 0px">01</p>
                  </div>
                </div>
                <!-- 赞助说明 -->
                <div>
                  <div
                    style="
                      color: #ff6b4d;
                      letter-spacing: 1.5px;
                      line-height: 16px;
                      text-align: justify;
                      font-size: 16px;
                      font-weight: bold;
                    "
                  >
                    <p style="padding: 0px; margin: 0px">赞助说明</p>
                  </div>
                </div>
              </div>
              <div>
                <div
                  style="
                    color: #ff6b4d;
                    letter-spacing: 1.5px;
                    line-height: 20px;
                    text-align: justify;
                    font-size: 12px;
                    font-weight: bold;
                  "
                >
                  HAPPY HOLIDAY
                </div>
              </div>
            </div>
            <div
              style="width: 40px; line-height: 2px"
              data-md5="997e1"
              class="title1"
            >
              <img src="https://www.13ku.cn/static/img/zanzhu/zu2.png" />
            </div>
          </div>
        </div>
      </div>
      <!-- 内容 -->
      <div class="shuom-box">
        <!-- 1 -->
        <div>
          <div style="box-sizing: border-box; padding-bottom: 2px">
            <div
              style="
                display: -webkit-box;
                -webkit-box-pack: center;
                -webkit-box-align: end;
              "
            >
              <div
                style="
                  box-sizing: border-box;
                  border: 2px solid #ff977b;
                  padding: 1px 0;
                  transform: rotate(0deg);
                  -ms-transform: rotate(0deg);
                  -moz-transform: rotate(0deg);
                  -webkit-transform: rotate(0deg);
                  -o-transform: rotate(0deg);
                "
              >
                <div
                  style="
                    background-color: #ffdbbb;
                    box-sizing: border-box;
                    padding: 0 5px;
                    margin: 1px -4px -6px 4px;
                  "
                >
                  <div
                    style="
                      color: #ff977b;
                      letter-spacing: 1px;
                      line-height: 24px;
                      text-align: center;
                    "
                  >
                    <p style="padding: 0px; margin: 0px; font-size: 14px">
                      NO.<span class="autosort style_8">01</span>
                    </p>
                  </div>
                </div>
              </div>
              <div style="-webkit-box-flex: 1; width: 0; margin-bottom: 1px">
                <div
                  style="
                    color: #ff977b;
                    letter-spacing: 1px;
                    line-height: 21px;
                    text-align: justify;
                    margin-left: 8px;
                  "
                >
                  <p style="padding: 0px; margin: 0px; font-size: 18px">
                    云深不知处会努力坚持做到：
                  </p>
                </div>
                <div
                  style="
                    width: 100%;
                    height: 0px;
                    box-sizing: border-box;
                    border-top: 2px solid #ff977b;
                  "
                ></div>
              </div>
            </div>
          </div>
        </div>
        <div class="wzw-text-wrap">
          <div class="wp-block-zibllblock-feature">
            <div class="feature-icon">
              <img
                class="icon"
                src="https://www.13ku.cn/static/img/zanzhu/1.svg"
              />
            </div>
            <div class="feature-title">优质服务器</div>
            <div class="feature-note">大宽带，低延迟</div>
          </div>
          <div class="wp-block-zibllblock-feature">
            <div class="feature-icon">
              <img
                class="icon"
                src="https://www.13ku.cn/static/img/zanzhu/2.svg"
              />
            </div>
            <div class="feature-title">更新维护</div>
            <div class="feature-note">定期更新与维护</div>
          </div>
          <div class="wp-block-zibllblock-feature">
            <div class="feature-icon">
              <img
                class="icon"
                src="https://www.13ku.cn/static/img/zanzhu/3.svg"
              />
            </div>
            <div class="feature-title">每天更新</div>
            <div class="feature-note">游戏卡池每天更换</div>
          </div>
          <div class="wp-block-zibllblock-feature">
            <div class="feature-icon">
              <img
                class="icon"
                src="https://www.13ku.cn/static/img/zanzhu/4.svg"
              />
            </div>
            <div class="feature-title">福利活动</div>
            <div class="feature-note">每天签到领取大量资源</div>
          </div>
        </div>
        <!-- 2 -->
        <section>
          <section style="box-sizing: border-box; padding-bottom: 2px">
            <section
              style="
                display: -webkit-box;
                -webkit-box-pack: center;
                -webkit-box-align: end;
              "
            >
              <section
                style="
                  box-sizing: border-box;
                  border: 2px solid #ff977b;
                  padding: 1px 0;
                  transform: rotate(0deg);
                  -ms-transform: rotate(0deg);
                  -moz-transform: rotate(0deg);
                  -webkit-transform: rotate(0deg);
                  -o-transform: rotate(0deg);
                "
              >
                <section
                  style="
                    background-color: #ffdbbb;
                    box-sizing: border-box;
                    padding: 0 5px;
                    margin: 1px -4px -6px 4px;
                  "
                >
                  <section
                    style="
                      color: #ff977b;
                      letter-spacing: 1px;
                      line-height: 24px;
                      text-align: center;
                    "
                  >
                    <p style="padding: 0px; margin: 0px; font-size: 14px">
                      NO.<span>02</span>
                    </p>
                  </section>
                </section>
              </section>
              <section
                style="-webkit-box-flex: 1; width: 0; margin-bottom: 1px"
              >
                <section
                  style="
                    color: #ff977b;
                    letter-spacing: 1px;
                    line-height: 21px;
                    text-align: justify;
                    margin-left: 8px;
                  "
                >
                  <p style="padding: 0px; margin: 0px; font-size: 18px">
                    为什么需要赞助
                  </p>
                </section>
                <section
                  style="
                    width: 100%;
                    height: 0px;
                    box-sizing: border-box;
                    border-top: 2px solid #ff977b;
                  "
                ></section>
              </section>
            </section>
          </section>
        </section>
        <div class="wzw-text-wrap">
          <section>
            <section style="padding-bottom: 2px; box-sizing: border-box">
              <section
                style="
                  width: 30px;
                  margin: 0px 0px -11px 50px;
                  line-height: 20px;
                  transform: skew(-20deg);
                  -webkit-transform: skew(-20deg);
                  -moz-transform: skew(-20deg);
                  -o-transform: skew(-20deg);
                "
              >
                <section
                  style="
                    display: inline-block;
                    vertical-align: middle;
                    margin-right: 5px;
                    width: 10px;
                    height: 20px;
                    line-height: 20px;
                    background-color: #ffe4e4;
                  "
                ></section>
                <section
                  style="
                    display: inline-block;
                    vertical-align: middle;
                    width: 10px;
                    height: 20px;
                    line-height: 20px;
                    background-color: #ffe4e4;
                  "
                ></section>
              </section>
              <section
                style="
                  display: -webkit-flex;
                  display: flex;
                  align-items: stretch;
                "
              >
                <section
                  style="width: 20px; padding: 20px 0px; box-sizing: border-box"
                >
                  <section
                    style="
                      height: 100%;
                      width: 20px;
                      background-color: rgba(255, 228, 228, 0.5);
                    "
                  ></section>
                </section>
                <section style="flex: 1" data-md5="6a933" class="style_9">
                  <section
                    style="
                      background-color: rgba(255, 228, 228, 0.5);
                      padding: 20px 0px;
                      box-sizing: border-box;
                    "
                  >
                    <section
                      style="
                        background-color: rgba(255, 228, 228, 0.5);
                        padding: 20px 30px;
                        box-sizing: border-box;
                      "
                    >
                      <section
                        style="
                          color: #ff9396;
                          letter-spacing: 1px;
                          line-height: 24px;
                          text-align: justify;
                        "
                      >
                        <p style="font-size: 14px; padding: 0px; margin: 0px">
                          {{ why }}
                        </p>
                      </section>
                    </section>
                  </section>
                </section>
                <section
                  style="width: 20px; padding: 20px 0px; box-sizing: border-box"
                >
                  <section
                    style="
                      height: 100%;
                      width: 20px;
                      background-color: rgba(255, 228, 228, 0.5);
                    "
                  ></section>
                </section>
              </section>
              <section
                style="
                  width: 30px;
                  margin: -11px 50px 0px auto;
                  line-height: 20px;
                  transform: skew(-20deg);
                  -webkit-transform: skew(-20deg);
                  -moz-transform: skew(-20deg);
                  -o-transform: skew(-20deg);
                "
              >
                <section
                  style="
                    display: inline-block;
                    vertical-align: middle;
                    margin-right: 5px;
                    width: 10px;
                    height: 20px;
                    line-height: 20px;
                    background-color: #ffe4e4;
                  "
                ></section>
                <section
                  style="
                    display: inline-block;
                    vertical-align: middle;
                    width: 10px;
                    height: 20px;
                    line-height: 20px;
                    background-color: #ffe4e4;
                  "
                ></section>
              </section>
            </section>
          </section>
        </div>
      </div>
    </div>

    <!-- 支付弹窗 -->
    <van-dialog
      v-model="show"
      :show-cancel-button="false"
      :show-confirm-button="false"
      closeOnPopstate
      :closeOnClickOverlay="true"
    >
      <div class="modal-content">
        <div class="modal-header">
          <strong class="modal-title">扫码赞助</strong>
          <button class="close" data-dismiss="modal" @click="show = false">
            <div
              data-class="ic-close"
              data-svg="close"
              data-viewbox="0 0 1024 1024"
            >
              <svg class="ic-close" viewBox="0 0 1024 1024">
                <path
                  d="M573.44 512.128l237.888 237.696a43.328 43.328 0 0 1 0 59.712 43.392 43.392 0 0 1-59.712 0L513.728 571.84 265.856 819.712a44.672 44.672 0 0 1-61.568 0 44.672 44.672 0 0 1 0-61.568L452.16 510.272 214.208 272.448a43.328 43.328 0 0 1 0-59.648 43.392 43.392 0 0 1 59.712 0l237.952 237.76 246.272-246.272a44.672 44.672 0 0 1 61.568 0 44.672 44.672 0 0 1 0 61.568L573.44 512.128z"
                  p-id="35424"
                  data-spm-anchor-id="a313x.7781069.0.i48"
                ></path>
              </svg>
            </div>
          </button>
        </div>
        <div class="wzw-modal-body modal-body">
          <div class="wzw-donate-modal-zfm">
            <div class="wzw-donate-modal-title">
              <b>赞助发电❤云深不知处</b>
              <p class="wzwi_pay-title">
                {{ list[index].name }}（{{ list[index].text }}）
              </p>
            </div>
            <div class="wzw-donate-modal-ewm">
              <img
                :src="
                  'https://www.13ku.cn/static/img/zanzhu/' +
                  type +
                  '/' +
                  list[index].money +
                  '.png'
                "
              />
            </div>
            <p>长按保存支付二维码</p>
            <div class="wzw-donate-modal-btn">
              <div class="wzw-donate-btns">
                <button
                  class="btn wzw-zf-btn"
                  :class="{ ' wzw-active': type == 'wx' }"
                  @click="type = 'wx'"
                >
                  微信支付
                </button>
                <button
                  class="btn wzw-zf-btn"
                  :class="{ ' wzw-active': type == 'zfb' }"
                  @click="type = 'zfb'"
                >
                  支付宝支付
                </button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </van-dialog>
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';

export default {
  //import引入的组件需要注入到对象中才能使用
  components: {},
  data() {
    //这里存放数据
    return {
      why: '随着时间的推移，维持服务器的运行需要支出高昂的服务器和带宽费用。为了能继续坚持免费做下去，希望大家能够赞助云深不知处，给云深不知处加油打气！激励云深不知处继续创作下去！谢谢！',
      show: false,
      type: 'wx',
      list: [
        {
          name: '一个鸡腿',
          money: '10',
          text: '￥ 10'
        },
        {
          name: '一杯咖啡',
          money: '20',
          text: '￥ 20'
        },
        {
          name: '一个汉堡',
          money: '30',
          text: '￥ 30'
        },
        {
          name: '一份肯德基套餐',
          money: '50',
          text: '￥ 50'
        },
        {
          name: '一份全家桶',
          money: '100',
          text: '￥ 100'
        },
        {
          name: '爱心红包',
          money: 'zdy',
          text: '请扫码自定义金额'
        }
      ],
      index: 5
    }
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    zz(i) {
      this.index = i
      this.type = 'wx'
      this.show = true
    }
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeUnmount() {}, //生命周期 - 销毁之前
  unmounted() {}, //生命周期 - 销毁完成
  activated() {} //如果页面有keep-alive缓存功能，这个函数会触发
}
</script>
<style scoped lang="less">
.van-dialog {
  width: 355px;
  height: 495px;
  border-radius: @radius;
}
.content-wrap {
  .more {
    margin: 0 10px;
    background-color: #fff;
    border-radius: @radius;
    margin-bottom: 20px;
    overflow: hidden;
    // 标题框
    .bb {
      padding: 8px;
      background: linear-gradient(135deg, #16aaf7 0, #c696fc 80%);
      color: #fff;
      .bb1 {
        margin: auto auto;
        width: 150px;
        height: 49px;
        .bb1-1 {
          display: flex;
          align-items: center;
          justify-content: space-between;

          .style_5 {
            width: 7px;
            height: 7px;
            border: 1px solid #ffcd59;
            border-radius: 50%;
            box-sizing: border-box;
            transform: translate(52px, 5px);
          }

          .style_6 {
            width: 21px;
            margin: 0 -9px 8px auto;
            line-height: 2px;
            img {
              vertical-align: middle;
              width: 100%;
            }
          }
        }

        .title {
          display: flex;
          align-items: center;
          justify-content: center;

          .font-box {
            width: 28px;
            height: 28px;
            border-radius: 4px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 16px;
            font-weight: bold;
            color: #fff;
          }

          .zan {
            background-color: #85d6ac;
            transform-origin: right bottom;
            transform: rotate(16deg);
            margin: 0 8px;
          }

          .zhu {
            background-color: #ff8566;
            transform-origin: left bottom;
            transform: rotate(-16deg);
            margin: 0 8px;
          }
          .fang {
            background-color: #ffcd59;
            transform-origin: right top;
            transform: rotate(16deg);
          }
          .an {
            background-color: #7fceff;
            transform-origin: left top;
            transform: rotate(-16deg);
            margin: 0 2px;
          }
          .style_9 {
            width: 28px;
            height: 28px;
            border-radius: 4px;
            margin: 0 8px;
          }
        }

        .zs-box {
          display: flex;
          align-items: center;
          justify-content: space-between;
          margin-top: -7px;

          .y1 {
            width: 7px;
            height: 7px;
            border: 1px solid #ffab4c;
            border-radius: 50%;
            box-sizing: border-box;
            transform: translate(7px, -11px);
          }

          .y2 {
            width: 7px;
            height: 7px;
            border: 1px solid #85d6ac;
            border-radius: 50%;
            box-sizing: border-box;
            transform: translate(-27px, 5px);
          }
        }
      }
    }

    //赞助选项
    .content {
      .wzw-money-wrap {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
      }

      .wzw-money-item {
        position: relative;
        width: 100%;
        height: 180px;
        margin: 10px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-around;
        border: 1px solid transparent;
        overflow: hidden;
        -webkit-transition: transform 0.5s;
        transition: transform 0.5s;
        box-shadow: 8px 8px 20px 0 rgb(55 99 170 / 10%), -8px -8px 20px 0 #fff;
        border-radius: @radius;

        .wzw-money-icon {
          width: 90px;
          height: 90px;
        }
        .wzw-money-label {
          width: 70px;
          height: 30px;
          line-height: 30px;
          background: #fe85ca;
          border-radius: 0 5px 0 10px;
          font-weight: 700;
          color: #fff;
          font-size: 18px;
          text-align: center;
          position: absolute;
          top: -2px;
          right: -2px;
        }

        .wzw-money-name {
          font-size: 22px;
          font-weight: 700;
        }
      }
      .wzw-money-item:hover {
        border-color: #ed6d83;
        -webkit-transform: translateY(-8px);
        transform: translateY(-8px);
        -webkit-transition: transform 0.5s;
        transition: transform 0.5s;
      }
    }

    .bbb {
      padding: 8px;
      background: linear-gradient(135deg, #16aaf7 0, #c696fc 80%);
      color: #fff;

      .title-box {
        display: flex;
        align-items: center;
        justify-content: center;

        .title1 {
          width: 40px;
          line-height: 2px;

          img {
            vertical-align: middle;
            width: 100%;
          }
        }

        .title2 {
          margin: 0 10px;

          .top {
            display: flex;
            align-items: center;
            background: linear-gradient(
              to top,
              #ffe8e6 40%,
              rgba(255, 255, 255, 0) 40%
            );
            padding: 0 0 3px 0;
            justify-content: center;
          }
        }
      }
    }

    // 赞助说明
    .shuom-box {
      padding: 15px;
      margin-bottom: 20px;

      .wzw-text-wrap {
        margin-top: 10px;
        margin-bottom: 10px;
        .wp-block-zibllblock-feature {
          height: 198px;
          width: calc(50% - 10px);
          border-radius: @radius;
          text-align: center;
          display: inline-block;
          vertical-align: middle;
          margin: 5px;
          transition: 0.3s;
          box-shadow: 0 0 10px rgb(227 228 228);
          .feature-icon {
            font-size: 50px;
            padding: 20px 0;
            img {
              width: 60px;
              height: auto;
            }
          }
          .feature-title {
            padding: 0 10px;
          }
          .feature-note {
            opacity: 0.6;
            line-height: 1.5em;
            padding: 5px 10px 10px 10px;
            font-size: 0.8em;
          }
        }
      }
    }
  }

  .modal-content {
    .modal-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 15px;
      height: 53px;
      border-bottom: 1px solid #e5e5e5;
      border-color: rgba(50, 50, 50, 0.06);

      .modal-title {
        font-size: 17px;
        font-weight: 700;
      }
      .close {
        padding: 0;
        cursor: pointer;
        background: 0 0;
        border: 0;
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        transition: 0.2s;
        opacity: 0.4;
        color: #777;
        position: relative;
        z-index: 1;
        font-size: 21px;
        font-weight: 700;
        line-height: 1;
        text-shadow: 0 1px 0 #fff;

        svg {
          width: 21px;
          height: 21px;
          vertical-align: -0.15em;
          fill: currentColor;
          overflow: hidden;
        }
      }
    }
    .modal-body {
      position: relative;
      padding: 15px;
      height: 441px;
      background: #f5f6f7;
    }
    .wzw-donate-modal-zfm {
      position: relative;
      text-align: center;
      background: #fff;
      overflow: hidden;
      border-radius: @radius;
      padding: 15px;
      height: 411px;

      img {
        width: auto;
        height: 180px;
      }

      p {
        margin: 0 0 10px;
      }
    }

    .wzw-donate-modal-zfm::after,
    .wzw-donate-modal-zfm::before {
      position: absolute;
      content: '';
      width: 35px;
      height: 35px;
      background: #f5f6f7;
      border-radius: 99px;
      top: 68px;
    }

    .wzw-donate-modal-zfm::before {
      left: -17px;
    }

    .wzw-donate-modal-zfm::after {
      right: -17px;
    }
    .wzw-donate-modal-title {
      margin: 10px;
      height: 60px;
      border-bottom: 2.4px dashed rgba(50, 50, 50, 0.06);
      b {
        font-size: 20px;
        font-weight: 700;
      }
    }

    .wzw-donate-modal-ewm {
      padding: 10px;
    }
    .wzw-donate-modal-btn {
      padding: 15px;
      .wzw-donate-btns {
        display: inline-block;
        background: rgba(50, 50, 50, 0.06);
        border-radius: 99px;
        border: 1px solid rgba(50, 50, 50, 0.06);
        overflow: hidden;

        .btn {
          display: inline-block;
          margin-bottom: 0;
          font-weight: 400;
          text-align: center;
          white-space: nowrap;
          vertical-align: middle;
          touch-action: manipulation;
          cursor: pointer;
          background-image: none;
          border: 1px solid transparent;
          padding: 6px 12px;
          font-size: 14px;
          line-height: 1.42857143;
          border-radius: 4px;
          -webkit-user-select: none;
          -moz-user-select: none;
          -ms-user-select: none;
          user-select: none;
        }

        .wzw-zf-btn {
          border-radius: 99px;
          background: 0 0;
          transition: all 0.5s;
        }

        .wzw-active {
          background: #fff;
        }
      }
    }
  }
}
</style>
